<template>
  <a-card>
    <div>
      <a-form layout="horizontal">
        <div>
          <a-row >
            <a-col :md="6" :sm="24" >
              <a-form-item label="选择园区" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                <a-select v-model="query.farmName" placeholder="请选择园区" @change="farmChange">
                  <a-select-option
                      v-for="(item, index) in farmList"
                      :key="index" :value="item.FarmId">
                    {{item.FarmName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24" >
              <a-form-item label="选择地块" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                <a-select v-model="query.greenHouseName" placeholder="请选择地块" @change="houseChange">
                  <a-select-option
                      v-for="(item, index) in greenHouseList"
                      :key="index" :value="item.GreenHouseId">
                    {{item.GreenHouseName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <div style="margin: 3px 0 0 8px;">
                <a-button type="primary" @click="search">查询</a-button>
                <a-button style="margin-left: 8px" @click="dataInit">重置</a-button>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>
<!--      <a-space class="operator">-->
<!--        <a-button @click="add" type="primary">新建</a-button>-->
<!--      </a-space>-->
      <standard-table style="margin-top: 10px"
                      :rowKey="(data, index) => index"
                      :columns="columns"
                      :dataSource="alarmList"
      >
        <div slot="CompareType" slot-scope="{text}">
          {{compareName(text)}}
        </div>
        <div slot="action" slot-scope="{text, record, index}">
          <a-popconfirm title="确定删除?" @confirm="delRecord(record, index)">
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a href="#" style="color: #f5222d"><a-icon type="delete" />删除</a>
          </a-popconfirm>
        </div>
      </standard-table>
    </div>
  </a-card>
</template>

<script>
  import StandardTable from '@/components/table/StandardTable'
  import { list as farmList } from '@/services/farm'
  import { list as greenHouseList } from '@/services/greenhouse'
  import { list as alarmList, alarmDel } from '@/services/alarm'
  const columns = [
    {
      title: 'ID',
      dataIndex: 'ID',
      scopedSlots: { customRender: 'ID' }
    },
    {
      title: '规则名称',
      dataIndex: 'ConfigName',
      scopedSlots: { customRender: 'ConfigName' }
    },
    {
      title: '设备名称',
      dataIndex: 'DevName',
      scopedSlots: { customRender: 'DevName' }
    },
    {
      title: '属性名称',
      dataIndex: 'DisplayName',
      scopedSlots: { customRender: 'DisplayName' }
    },
    {
      title: '比较',
      dataIndex: 'CompareType',
      scopedSlots: { customRender: 'CompareType' }
    },
    {
      title: '阈值',
      dataIndex: 'Value',
      scopedSlots: { customRender: 'Value' }
    },
    {
      title: '数值',
      dataIndex: 'AlarmValue',
      scopedSlots: { customRender: 'AlarmValue' }
    },
    {
      title: '告警时间',
      dataIndex: 'AlarmTime',
      scopedSlots: { customRender: 'AlarmTime' }
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '150px',
      scopedSlots: { customRender: 'action' }
    }
  ]
  export default {
    name: "AlarmIndex",
    data() {
      return {
        columns,
        farmList: [],
        greenHouseList: [],
        alarmList: [],
        index: null, // dev索引
        data: {}, //修改属性
        query: {
          farmId: undefined,
          farmName: undefined,
          greenHouseId: undefined,
          greenHouseName: undefined,
          devId: undefined,
          devName: undefined
        },
      }
    },
    computed: {
      compareName(e) {
        let v = ''
        return e => {
          switch (e) {
            case 'above':
              v = '大于'
              break
            case 'equal':
              v = '等于'
              break
            case 'below':
              v = '小于'
              break
            case 'notEqual':
              v = '不等于'
              break
            default:
              v = '未知'
          }
          return v
        }
      }
    },
    components: {
      StandardTable
    },
    created() {
      this.getFarmList()
    },
    methods: {
      async getFarmList() {
        let res = await farmList()
        this.farmList = res.Data
      },
      async getGreenHouseList() {
        let res = await greenHouseList(this.query.farmId)
        this.greenHouseList = res.Data
      },
      async search() {
        if(!this.query.greenHouseId) {
          this.$message.error('请选择地块')
          return
        }
        let res = await alarmList(this.query.greenHouseId)
        this.alarmList = res.Data
      },
      farmChange(e) {
        this.query.farmId = e
        this.queryInit()
        this.getGreenHouseList()
      },
      houseChange(e) {
        this.query.greenHouseId = e
      },
      queryInit() {
        this.query.greenHouseId = undefined
        this.query.greenHouseName = undefined
      },
      dataInit() {
        // this.$options可以获取配置对象，配置对象的data函数执行，返回的响应式数据为空的
        Object.assign(this.$data, this.$options.data())
        this.getFarmList()
      },
      delRecord(row, index) {
        console.log(row);
        if(!row.ID) {
          this.$message.error('无效ID')
          return
        }
        alarmDel(row.ID).then(res => {
          if(res.Code == 0) {
            this.$message.success('删除成功')
            this.alarmList.splice(index, 1)
          } else this.$message.error('删除失败')
        }).catch(err => {
          console.log(err)
          this.$message.error('删除失败')
        })
      }
    }
  }
</script>

<style scoped>

</style>
